import React, { useEffect, useState } from 'react';
import './Helpcontent.css';
import axios from 'axios';

const Helpcontent = () => {
  const [conList, setConList] = useState([]);
  const Title = [
    { href: 'guide_book', title: '工作台使用指南' },
    { href: 'find_resources', title: "文创资源哪里找" },
    { href: 'impressum', title: "版本说明" },
    { href: 'update_summary', title: "更新汇总" },
    { href: 'recommendation', title: "如何上推荐" },
    { href: 'about_website', title: "关于格物衍艺" }
  ]
  const hre = window.location.href.split('/').pop();
  const con_title = '"' + hre + '"';
  const url = 'http://192.168.72.166:8080/api/getHelpCenterDatas/?con_title=' + con_title;
  useEffect(() => {
    axios.get(url).then(res => {
      setConList(res.data.data);
    });
  }, [hre]);
  return (
    <div className='helpcontent_box'>
      {
        Title.map((item) => {
          if (item.href == hre) {
            return <div className='bc_title'>{item.title}</div>
          }
        })
      }
      {
        conList.map((item) => {
          if (item.help_type == "title") {
            return <div className='title_small'>
              {item.help_content}
            </div>
          }
          if (item.help_type == "text") {
            return <div className='bc_text'>
              {item.help_content}
            </div>
          }
          if (item.help_type == "image") {
            const Src = "http://192.168.72.166:8080/" + item.help_content;
            return <div className='bc_image'>
              <img className='bc_img' src={Src} alt={item.help_content} />
            </div>
          }
        })
      }
    </div>
  );
};
export default Helpcontent;
